<template>
  <div class="my_center">
    <Header></Header>
    <div class="my_center_main">
      <div class="center_top">
        <div class="portrait">
          <img src="../assets/img/logo.png" alt="" />
        </div>
        <div class="usermes">
          <h3>
            {{ user.nickname }}
          </h3>
          <input
            type="text"
            name=""
            id=""
            disabled="disabled"
            v-model="user.int"
          />
        </div>
      </div>
      <div class="center_main" v-if="this.$route.path=='/UserRoom'">
        <div class="left">
          <ul>
            <li><i>姓名：</i>{{ user.name }}</li>
            <li><i>性别：</i>{{ user.sex }}</li>
            <li><i>学校：</i>{{ user.school }}</li>
            <li><i>地址：</i>{{ user.site }}</li>
            <li><i>电话：</i>{{ user.phone }}</li>
            <li><i>邮箱：</i>{{ user.eMail }}</li>
          </ul>
          <div class="left_btn">
            <el-button type="success" round plain>关注</el-button>
            <el-button type="primary" round plain @click="openLeaveWord()"
              >发消息</el-button
            >
          </div>
        </div>
        <div class="right">
          <div class="myplan clear">
            <h3><i class="el-icon-s-promotion"></i> 我的目标</h3>
            <ul>
              <li>
                <i>我的专业：</i
                ><input
                  type="text"
                  :disabled="amendmaplan"
                  v-model="myplan.plan_major"
                />
              </li>
              <li>
                <i>目标学校：</i
                ><input
                  type="text"
                  :disabled="amendmaplan"
                  v-model="myplan.plan_school"
                />
              </li>
              <li>
                <i>考研时间：</i
                ><input
                  type="text"
                  :disabled="amendmaplan"
                  v-model="myplan.plan_time"
                />
              </li>
            </ul>
          </div>
          <div class="myColl clear">
            <h3><i class="el-icon-s-claim"></i> 我发布的文章</h3>
            <ul class="myCollcard">
              <Card
                v-for="ifem in article"
                :key="ifem.id"
                :liData="ifem"
              ></Card>
            </ul>
            <el-button
              class="btn"
              type="primary"
              size="small"
              icon="el-icon-share"
              @click="moreMycoll(user.u_id)"
              >更多</el-button
            >
          </div>
          <div class="myColl clear">
            <h3><i class="el-icon-video-camera-solid"></i> 我发布的视频</h3>
            <ul class="myCollvideo">
              <VideoCard
                v-for="ifem in video"
                :key="ifem.id"
                :liData="ifem"
              ></VideoCard>
            </ul>
            <el-button
              class="btn"
              type="primary"
              size="small"
              icon="el-icon-share"
              @click="moreMycoll(user.u_id)"
              >更多</el-button
            >
          </div>
        </div>
      </div>
      <router-view></router-view>
    </div>
    <el-dialog title="写留言" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="留言">
          <el-input v-model="form.leaveWord" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelWriteLeaveWord">取 消</el-button>
        <el-button type="primary" @click="writeLeaveWord()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Card from "../components/Card.vue";
import VideoCard from "../components/VideoCard.vue";
import axios from "axios";
export default {
  data() {
    return {
      user: {},
      myplan: {},
      article: {},
      video: {},
      amendmaplan: true,
      dialogFormVisible: false,
      form: {
        leaveWord: "",
      },
    };
  },
  name: "mycenter",
  components: { Header, Card, VideoCard },
  mounted() {
    console.log();
    this.getuserData();
  },
  methods: {
    // 用户信息初始化
    getuserData() {
      var writerID = this.$route.query.userID;
      axios
        .post(`http://localhost:3000/getUserDatas`, { writerID })
        .then((ret) => {
          this.user = ret.data.userData;
          this.article = ret.data.article.slice(0, 6);
          this.video = ret.data.video.slice(0, 6);
          this.myplan.plan_major = this.user.plan_major;
          this.myplan.plan_school = this.user.plan_school;
          this.myplan.plan_time = this.user.plan_time;
        });
    },
    //回复消息
    cancelWriteLeaveWord() {
      this.dialogFormVisible = false;
      this.form.leaveWord = "";
    },
    openLeaveWord() {
      this.dialogFormVisible = true;
    },
    writeLeaveWord() {
      if (this.form.leaveWord == "") {
        this.$message({
          showClose: true,
          message: "回复不能为空！！",
          type: "error",
        });
      } else {
        var myDate = new Date();
        var time = myDate.toLocaleString();
        var timestamp = (Date.parse(myDate) + "").substring(0, 10);
        axios
          .post(`http://localhost:3000/information/writeLeaveWord`, {
            w_id: JSON.parse(localStorage.getItem("token") || "{}").u_id,
            w_main: this.form.leaveWord,
            w_type: 3,
            w_to: this.user.u_id,
            time,
            timestamp,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.$message({
                showClose: true,
                message: "回复成功",
                type: "success",
              });
              this.cancelWriteLeaveWord();
            }
          });
      }
    },

    // 更多收藏按钮
    moreMycoll(id) {
     this.$router.push({
        path: "/UserRoom/Issue",
        query: { userId: id },
      });
    },
  },
};
</script>

<style scoped>
.my_center_main {
  width: 80%;
  margin: auto;
}
.center_top {
  height: 200px;
  display: flex;
  padding: 120px 0 0 20px;
  box-sizing: border-box;
  background: url(../../public/header.png) no-repeat;
  background-size: 100% 100%;
}
.center_top div.portrait {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid white;
}
.usermes {
  width: 90%;
  padding: 0px 20px;
}
.usermes h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #303133;
}
.usermes input {
  width: 400px;
  height: 20px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  border: 0;
  transition: 0.3s;
  background-color: rgba(0, 0, 0, 0);
}
.usermes input:focus {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.5);
}
.center_main {
  display: flex;
  position: relative;
  justify-content: space-between;
  padding: 10px;
  background-color: #f1f1f1;
}
.left {
  width: 260px;
  height: 500px;
  padding: 20px;
  position: sticky;
  top: 80px;
  background-color: #fff;
}
.left li {
  padding: 20px 10px;
}
.left_btn {
  margin: 20px;
}
.right {
  width: 75%;
  overflow-y: scroll;
}
.right div {
  background-color: #fff;
  margin-bottom: 20px;
}
.right div {
  padding: 10px;
}
.right div h3 {
  width: 200px;
  margin-left: 20px;
  margin-bottom: 20px;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 700;
  color: #409eff;
  border-bottom: 2px solid #409eff;
}
.myplan ul {
  display: flex;
  justify-content: space-around;
  padding: 10px 20px;
}
.myplan ul input {
  border: 0;
  font-size: 16px;
  color: #606266;
}
.myplan ul input:focus {
  border: 1px solid #409eff;
}
.myplan .btn {
  float: right;
}
.myColl {
  padding: 10px 0;
}
.myColl ul {
  display: flex;
  flex-wrap: wrap;
}
.myCollcard li {
  margin: 10px;
}
.myCollcard li:nth-of-type(3n) {
  margin-right: 0;
}
.myCollvideo li {
  margin: 10px 20px;
}
</style>
